<template>
    <div class="container">
        <div class="fixed">
            <miao-header>
                <span slot="header">点到</span>
            </miao-header>
            <div class="hunt">
                <router-link to="/index" tag="span">江夏店</router-link>
            </div>
            <div class="classifyScroll" ref="classifyScroll">
                <ul class="classify">
                    <li
                            v-for="(item, key) in classify"
                            :key="key"
                            :class="{'classifyActive':key === index}"
                            @click="classifyFn(item, key)"
                    >{{item}}</li>
                </ul>
            </div>
            <div class="secondsKillTimeScroll" ref="secondsKillTimeScroll">
                <ul class="SecondsKillTime">
                    <li
                            v-for="(val, index) in SecondsKillTime"
                            :key="index"
                            :class="{'active':index===time}"
                    >{{val}}</li>
                </ul>
            </div>
        </div>
        <app-loading :isHidLoading="isHidLoading"></app-loading>
        <div class="classifyScrollY"  ref="classifyScrollY">
            <div>
                <div class="renovation">
                  <i class="el-icon-loading"></i>
                </div>
              <div class="home-loc" v-for="(item, key) in classifyPage" :key="key">
                <!--数据ID-->
                <div @click="productDetailsFn(item)">
                  <my-commodity :commodity="item"></my-commodity>
                </div>
                <div class="join icon-join-left" ref="globuleParent" @click="shopCartFn(item)">
                  <i class="el-icon-circle-plus-outline"
                     ref="homeComScroll" @click="comScrollFn"></i>
                  <span v-if="key===globuleShow" class="globule" ref="globule">1</span>
                </div>
              </div>
                <div class="upload">
                  <img v-if="classifyPage.length>3" src="../assets/pull.png" alt="">
                </div>
            </div>
        </div>
        <div class="footerFixed">
          <span v-if="cartNumber" id="dot">{{cartNumber}}</span>
          <div  class="ball-container">
            <transition name="fade" v-for="(ball,ballKey) in balls"
                        @before-enter="beforeEnter"
                        @enter="dropping"
                        :key="ballKey"
                        @after-enter="afterDrop">
              <div class="ball" v-show="ball.show">
                <div class="inner inner-hook">1</div>
              </div>
            </transition>
          </div>
          <miao-footer :highlight="$route.params.highlight"></miao-footer>
        </div>

    </div>
</template>

<script>
    export default {
        name: "home",
        data(){
            return{
                classify:{
                  fruit:"鲜果",
                  milk:'牛奶',
                  vegetable:'蔬菜',
                  meat:"鲜肉",
                  waterFood:'水产',
                  riceOil:'粮油',
                  sanck:'零食'
                },
                classifyPage:[],
                index:'sanck',
                SecondsKillTime:['12:00-16:00','16:00-20:00','20:00-22:00'],
                getTime:new Date().getHours(),
                setTime:false,
                globuleShow:false,
                balls:[
                {
                  show:false
                },
                {
                  show:false
                },
                {
                  show:false
                },
                {
                  show:false
                },
                {
                  show:false
                }
              ],  //设置了balls数组来代表五个小球
                dropBalls:[],  //设置了dropBalls数组正在运行的小球,
                shopCartFooter:[],
                cartNumber:0,
                pull:null,
                lastTime:0,
                nowTime:0,
                isHidLoading:false
            }
        },
        created(){
          this.isHidLoading = true;
          this.$http.get('/api/prod',
            {
              params:{
                prodType:'sanck',
                prodCount:10,
                isPublish:true
              }}).then(req=>{
            req.data.code===-1&&(this.$router.push({name:'ringUp'}));
            req.data.code===1&&(this.classifyPage =req.data.data);
          });
        },
        mounted(){
          this.$nextTick(()=>{
                //滑动动画
            this.$refs.classifyScroll && new this.$BSscroll(this.$refs.classifyScroll,{
                    //动画移动方向
                    scrollX:true,
                    //弹跳的方向
                    bounce:{
                        left:true,
                        right:true,
                        top:false,
                        bottom:false
                    },
                    //动画速率
                    momentum:true,
                    click:true
                });
            this.$refs.secondsKillTimeScroll && new this.$BSscroll(this.$refs.secondsKillTimeScroll,{
                    //动画移动方向
                    scrollX:true,
                    //弹跳的方向
                    bounce:{
                        left:true,
                        right:true,
                        top:false,
                        bottom:false
                    },
                    //动画速率
                    momentum:true,
                    click:true
                });
          });
          this.$store.state.totalNumber&&(this.cartNumber = this.$store.state.totalNumber);
        },
        watch:{
        classifyPage(){
          this.isHidLoading = false;
          this.$refs.classifyScrollY&&(this.pull = new this.$BSscroll(this.$refs.classifyScrollY,{
            //动画移动方向
            scrollY:true,
            //弹跳的方向
            bounce:{
              left:false,
              right:false,
              top:true,
              bottom:true
            },
            //动画速率
            momentum:true,
            click:true,
            pullDownRefresh:{
              stop:60,
              threshold:60
            },
            pullUpLoad: {
              threshold:30
            }
          }));
          //pullingDown 在一次下拉刷新的动作后，这个时机一般用来去后端请求数据。
          this.pull.on('pullingDown',()=> {
            this.$http.get('/api/prod',{
              params:{
                prodType:this.index,
                isPublish:true
              }}).then(req=>{
              req&&(this.classifyPage =req.data.data);
              this.pull.finishPullDown();
              this.pull.refresh();
            });
          });
          //    pullingUp  用于下拉加载
          this.pull.on('pullingUp',()=>{
            this.$http.get('/api/prod',{
              params:{
                prodType:this.index,
                prodCount:10,
                isPublish:true
              }}
            ).then((req)=>{
              req&&(this.classifyPage =this.classifyPage.concat(req.data.data));
              this.pull.finishPullDown();
              this.pull.refresh();
            });
          })
        }
      },
        computed:{
            time(){
                if(this.getTime>11&&this.getTime<16){
                   return 0
                }else if(this.getTime>=16&&this.getTime<20){
                    return 1
                }else if(this.getTime>=20&&this.getTime<22) {
                    return 2
                }
            },
        },
        methods: {
          productDetailsFn(val){
            this.$store.state.prod = val;
            this.$router.push({name:'productDetails'});
          },
          //添加到购物车
          shopCartFn(val){
            let _this = this;
            this.nowTime = new Date().getTime();
            if(this.nowTime-this.lastTime>500){
              setTimeout(function () {
                _this.cartNumber++;
                _this.$http.put('/api/cart',{
                  pid:val._id,
                }).then(req=>{
                  if(req.data.code === 1){
                    val&&(val.quantity++);
                    req&&_this.shopCartFooter.push(val);
                  }
                });
              },500);
              this.lastTime = this.nowTime;
            }
          },
          //食物分类点击事件 item, key
          classifyFn(val, key) {
            this.isHidLoading = true;
              this.$http.get('/api/prod',
                {
                  params:{
                    prodType:key,
                    isPublish:true
                  }
                }).then(req=>{
                req.data.code===1&&((this.index = key)&&(this.classifyPage =req.data.data)&&(this.isHidLoading = false));
              });

          },
          comScrollFn(event){
            this.drop(event.target);
            this.count++
          },
          drop(el){
            for(let i = 0; i < this.balls.length; i++ ){
              let ball = this.balls[i];
              if(!ball.show){  //将false的小球放到dropBalls
                ball.show = true;
                ball.el = el; //设置小球的el属性为一个dom对象
                this.dropBalls.push(ball);
                return;
              }
            }
          },
          beforeEnter(el){ //这个方法的执行是因为这是一个vue的监听事件
            let count = this.balls.length;
            while (count--){
              let ball = this.balls[count];
              if(ball.show){
                let rect = ball.el.getBoundingClientRect(); //获取小球的相对于视口的位移(小球高度)
                let x = rect.right -162;
                let y = -(window.innerHeight - rect.top - 70); //负数,因为是从右上角往下的的方向
                el.style.display = ''; //清空display
                el.style.webkitTransform = 'translateY(' + y + 'px)';  //translateY
                let inner = el.getElementsByClassName('inner-hook')[0];
                inner.style.webkitTransform = 'translateX(' + x + 'px)';
              }
            }

          },
          dropping(el, done) { //这个方法的执行是因为这是一个vue的监听事件
            /* eslint-disable no-unused-vars */
            let rf = el.offsetHeight; //触发重绘html
            this.$nextTick(() => { //让动画效果异步执行,提高性能
              el.style.webkitTransform = 'translate3d(0,0,0)';
              el.style.transform = 'translate3d(0,0,0)';
              //处理内层动画
              let inner = el.getElementsByClassName('inner-hook')[0]; //使用inner-hook类来单纯被js操作
              inner.style.webkitTransform = 'translate3d(0,0,0)';
              inner.style.transform = 'translate3d(0,0,0)';
              el.addEventListener('transitionend', done); //Vue为了知道过渡的完成，必须设置相应的事件监听器。
            });
          },
          afterDrop(el) { //这个方法的执行是因为这是一个vue的监听事件
            let ball = this.dropBalls.shift(); //完成一次动画就删除一个dropBalls的小球
            if (ball) {
              ball.show = false;
              el.style.display = 'none'; //隐藏小球
            }
          }
        }
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    body{
      margin: 0;
    }
    .ball-container{
      height: 50px;
    }
    .ball {
      position: absolute;
      left:290px;
      bottom: 65px;
      z-index: 999;
      transition: all .5s cubic-bezier(.68,.01,.98,.64); /*贝塞尔曲线*/
    }
    .inner {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background-color: #7bd98d;
      transition: all .5s linear;
      text-align: center;
      line-height: 34px;
      color: white;
    }
    #dot{
      display: inline-block;
      position: absolute;
      left:290px;
      bottom: 65px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: RGB(254,60,46);
      color: white;
      text-align: center;
      line-height: 34px;
      font-size: 26px;
      z-index: 9999;
    }
    ul{
        list-style: none;
        background: #fff;
        position: relative;
        z-index: 99;
    }
    .container{
        width: 100vw;
        height: 100vh;
    }
    .hunt{
        margin-top: 100px;
        width: 100%;
        background: linear-gradient(to left,#31e07c,#1cd245);
    }
    .hunt>span{
        text-align: center;
        display: inline-block;
        width: 80%;
        height: 60px;
        line-height: 60px;
        margin: 10px 10%;
        background:rgba(0,0,0,.2);
        border-radius: 30px;
        color: #efeae1;
        font-size: 28px;
    }
    .fixed{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
        background: #fff;
    }
    .footerFixed{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
    }
    .classifyScroll{
        width: 100vw;
        overflow: auto;
    }
    .classify{
        list-style: none;
        width: auto;
        font-size: 0;
        padding:0 5px;
        box-sizing: border-box;
    }
    .classify>li{
        width: 14vw;
        height: 70px;
        display: inline-block;
        text-align: center;
        line-height: 70px;
        font-size: 36px;
        box-sizing: border-box;
        color: #3f3f3f;
    }
    .secondsKillTimeScroll{
        width: 100vw;
        overflow: hidden;
    }
    .classifyScrollY{
        height: 100vh;
        overflow-y: auto;
    }
    .renovation {
      width: 100vw;
      height:340px;
      position: relative;
      text-align: center;
    }
    .renovation>i{
      font-size: 52px;
      color: #7bd98d;
      position: absolute;
      left: 47%;
      bottom: 40px;
    }
    .home-loc{
      position: relative;
    }
    .join{
      display: inline-block;
      position: absolute;
      right: 10px;
      bottom:10px;
      margin: 0 40px 20px 0;
    }
    .join>i{
      color: #5cb635;
      font-size: 52px;
    }
    .globule{
      position: absolute;
      right: 6px;
      bottom:6px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background:  #5cb635;
      color: #fff;
      text-align: center;
      line-height: 40px;
      display: inline-block;
    }
    .upload{
        text-align: center;
        height:100px;
    }
    .upload>img{
      width: 42px;
      height: 42px;
      display: inline-block;
      margin: 0 auto;
      position: relative;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
      0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes spin {
      0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    .SecondsKillTime{
        width: 150vw;
        font-size: 0;
    }
    .SecondsKillTime>li{
        display: inline-block;
        box-sizing: border-box;
        width: 29.333%;
        height: 70px;
        font-size: 32px;
        margin:20px;
        color: #666666;
        border-radius: 6px;
        background: #f1f1f1;
        text-align: center;
        line-height: 70px;
    }
    .classify>.classifyActive{
        color: #f1511a;
        border-bottom: 6px solid #f1511a;
    }
    .SecondsKillTime>.active{
        color: #f1511a;
    }
</style>
